<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 将代码编写在window.onload的回调函数中。
        window.onload=function(){
            const btn=document.querySelector("#btn")
            btn.addEventListener("click",()=>{alert(123)})
        }

        //  可以将代码编写在document对象的DOMContentLoaded的回调函数中.
        document.addEventListener("DOMContentLoaded",()=>{
            const btn=document.querySelector("#btn")
            btn.addEventListener("mouseenter",()=>{
                btn.style.width="500px"
            })
            
        })
        
    </script>
    <script defer src="./script.js"></script>
</head>
<body>
    <button id="btn">点击一下</button>
    <iframe src="https://www.baidu.com" frameborder="0"></iframe>
    <script>
        document.documentElement.lang="zh"
        document.title="文档的加载"


        /* 
            网页是自上向下加载的。如果JS代码编写在网页的上边，JS代码执行时，网页还没有加载完毕，这时会出现无法获取DOM对象的情况
                window.onload事件会在窗口的内容加载完毕后才触发。
            如何解决这个问题？
                1.将script代码编写在body里的最后

                2.将代码编写在window.onload的回调函数中。
                    window.onload事件会在窗口的内容加载完毕后才触发,

                3.可以将代码编写在document对象的DOMContentLoaded的回调函数中.(执行时间更快，更早)
                    document的DOMContentLoaded事件会在当前文档加载完毕之后才触发。（这个事件只能用addEventListner来绑定）

                4.将JS文件编写在外部的文件中，然后defer的形式引入(执行时间比DOMContentLoaded还要早)
        */
    </script>
</body>
</html> 